<header class="wlc-header">
    <div class="header-content row">
        <div class="col-xs-6 grid">
            <h3><i class="fa fa-connectdevelop fa-lg margin-right-10"/>分布式容器集群控制台</h3>
            <h4 class="margin-top-20 padding-left-30">
                <p class="margin-bottom-5">轻松管理你的容器集群与 Docker 镜像</p>
            </h4>
        </div>
        <div class="col-xs-6 grid">
            <div class="pull-right grid-cell">
                <div class="cell-image"><img src="./images/welcome_docker.png"/></div>
                <div class="cell-title">Docker 镜像</div>
                <ul class="list-unstyled">
                    <li>Dockerfile 的产物, Docker 容器的前提</li>
                    <li>为 Docker 容器提供文件系统服务</li>
                </ul>
            </div>
            <div class="pull-right grid-cell">
                <div class="cell-image"><img src="./images/welcome_kubernetes.png"/></div>
                <div class="cell-title">容器集群</div>
                <ul class="list-unstyled">
                    <li>为微服务架构提供了很好的支持</li>
                    <li>将复杂的应用分解成互相连接的微服务</li>
                </ul>
            </div>
        </div>
    </div>
</header>
<section>
    <h5>我的集群<a ui-sref="k8s" class="margin-left-15">管理...</a></h5>
    <div class="wlc-container clearfix">
        <a ui-sref="k8s-overview({kDbCode: elem.clusterCode, name: elem.clusterName})" class="panel k8s-panel"
           ng-repeat="elem in ::wlc.k8sList">
            <div class="panel-body">
                <div class="cell-icon k8s-icon"><i class="fa fa-cubes fa-lg"></i></div><div>
                <div title="{{::elem.clusterName}}">{{::elem.clusterName}}</div>
                <span>{{::elem.clusterCode}}</span></div>
            </div>
        </a>
    </div>
    <h5>我的镜像<a ui-sref="docker-image" class="margin-left-15">管理...</a></h5>
    <div class="wlc-container clearfix">
        <a ui-sref="docker-image-detail({imageId: elem.id})" class="panel docker-panel" ng-repeat="elem in ::wlc.dckList">
            <div class="panel-body">
                <div class="cell-image" ng-class="{'image-app': elem.imagepath.indexOf('default') == 0 }">
                    <img ng-src="./images/docker-icon/{{::elem.imagepath}}"/></div><div>
                <div title="{{::elem.imageName}}">{{::elem.imageName}}</div>
                <span>{{::elem.ntypeName}}</span></div>
            </div>
        </a>
    </div>
    <h5>我的应用<a ui-sref="app-service" class="margin-left-15">管理...</a></h5>
    <div class="wlc-container clearfix">
        <a ui-sref="app-service-detail({code: elem.appCode})" class="panel service-app-panel" ng-repeat="elem in ::wlc.sapList">
            <div class="panel-body">
                <div class="cell-icon service-app-icon">APP</div><div>
                <div title="{{::elem.appCode}}">{{::elem.appCode}}</div>
                <span>{{::elem.k8sCode}}</span></div>
            </div>
        </a>
    </div>
</section>